<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<!-- 在 input 中输入文字，点击 「添加」将文字内容输入到 ul 中 -->
<!-- 点击 「删除最后一句」 将最后一个 li 删除 -->
  <ul id="container">
    <li>窗前明月光</li>
  </ul>
  <div class="btns">
    <input type="text">
    <button>添加</button>
    <button>删除最后一句</button>
  </div>
</body>
</html>
<script>
/* 
//第一种
    const container = document.querySelector("#container");
    const input = document.querySelector("input");
    const btn = document.querySelectorAll("button"); 
    btn[0].onclick = function(){
        const li = document.createElement("li")
        li.innerText = input.value
        container.appendChild(li);
        input.value = "";
    }
    btn[1].onclick = function(){
        container.removeChild(container.lastElementChild]);
    }
*/

/* 
//第二种
    const container = document.querySelector("#container");
    const input = document.querySelector("input");
    const btn = document.querySelectorAll("button");
    btn[0].onclick = function(){
        container.innerHTML += `<li>${input.value}</li>`;
    }
    btn[1].onclick = function(){
        container.removeChild(container.lastElementChild)
    }
*/




</script>
<style>
    li{
        width: 50px;
        height: 50px;
        border:1px solid #000;
        list-style: none;
        margin:50px;
        line-height: 50px;
        text-align: center;
    }
    .active{
        background: orange;
    }
</style>
